<script>
import UserinfoEdit from '@/views/userinfo/UserinfoEdit.vue'
export default {
  name: 'UserinfoList',
  components: { UserinfoEdit },
  data () {
    return {
      searchForm: {},
      dataList: [],
      pageInfo: {
        page: 1,
        limit: 5,
        count: 0
      },
      roleList: [],
      ids: []

    }
  },
  methods: {
    getRoleList () {
      // this.$axios.get('role', { params: { param: 'select' } }).then(({ data }) => {
      //   if (data.code === 200) {
      //     this.roleList = [...data.data]
      //   }
      // })
      this.$axios.get('role', { params: { param: 'select' } }).then(data => {
        this.roleList = [...data]
      }).catch(e => e)
    },
    getDataList () {
      this.$axios.get('userinfo', {
        params: {
          param: 'list',
          ...this.pageInfo,
          ...this.searchForm
        }
      }).then(data => {
        this.dataList = data.list
        this.pageInfo.count = data.count
      }).catch(e => e)
    },
    currentChange (value) {
      this.pageInfo.page = value
      this.getDataList()
    },
    sizeChange (value) {
      this.pageInfo.page = 1
      this.pageInfo.limit = value
      this.getDataList()
    },
    clear () {
      this.searchForm = { ...this.$options.data().searchForm }
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.getDataList()
    },
    deleteInfo (id) {
      this.$confirm(`确定删除编号[${id}]的数据吗?`, { type: 'info' }).then(() => {
        this.$axios.delete('userinfo', {
          params: {
            param: 'delete', id
          }
        }).then(() => {
          this.$message.success('删除成功')
          this.getDataList()
        }).catch(e => e)
      }).catch(e => e)
    },
    delInfo () {
      if (this.ids.length === 0) {
        this.$alert('请至少选中一行！', { type: 'error' })
        return false
      }
      this.$confirm(`确定删除编号[${this.ids.toString()}]的数据吗?`, { type: 'info' }).then(() => {
        this.$axios.delete('userinfo',
          {
            params: {
              param: 'del',
              ids: this.ids.toString()
            }
          }).then(() => {
          this.$message.success('批量删除成功！')
          this.getDataList()
        }).catch(e => e)
      }).catch(e => e)
    },
    selectionChange (selection) {
      this.ids = selection.map(item => item.id)
    },
    showDialog (id) {
      this.$refs.userinfoEdit.getById(id)
    },

    async init () {
      await this.getRoleList()
      await this.getDataList()
    }
  },
  created () {
    this.init()
  }
}
</script>

<template>
  <div>
    <el-card>
      <el-form inline :model="searchForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable/>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="searchForm.nickname" placeholder="请输入昵称" clearable/>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable>
            <el-option :value="1" label="可用"/>
            <el-option :value="2" label="禁用"/>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="searchForm.roleId" clearable filterable>
            <!-- 自定义组件中使用v-for，必须指定key的值 -->
            <el-option v-for="role in roleList" :key="role.id" :value="role.id" :label="role.roleName"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList">查询</el-button>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button-group style="margin-bottom: 10px">
        <el-button @click="showDialog()">添加</el-button>
        <el-button @click="delInfo">删除</el-button>
      </el-button-group>
      <el-table :data="dataList" border highlight-selection-row @selection-change="selectionChange">
        <el-table-column type="selection"/>
        <el-table-column label="编号" prop="id"/>
        <el-table-column label="用户名" prop="username"/>
        <el-table-column label="昵称" prop="nickname"/>
        <el-table-column label="手机号" prop="phone"/>
        <el-table-column label="状态" prop="status">
          <!--        <template slot-scope="scope">-->
          <!--          <el-tag v-if="scope.row.status === 1" type="success">可用</el-tag>-->
          <!--          <el-tag v-else type="danger">禁用</el-tag>-->
          <!--        </template>-->
          <template slot-scope="{row}">
            <el-tag v-if="row.status === 1" type="success">可用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="角色" prop="roleName"/>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="showDialog(row.id)">修改</el-button>
            <el-button type="text" @click="deleteInfo(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="pageInfo.count" :current-page="pageInfo.page" :page-size="pageInfo.limit"
                     :page-sizes="[5,10,20,50,100]" layout="total,prev,pager,next,jumper,sizes"
                     @current-change="currentChange" @size-change="sizeChange"/>
    </el-card>
    <userinfo-edit @close="getDataList" ref="userinfoEdit"/>
  </div>
</template>

<style scoped lang="scss">

</style>
